<template>
  <grimm-page type="Dialog-view" title="Dialog">
    <template slot="content">
      <grimm-button-group>
        <grimm-button @click="showTipsDialog">提示弹框</grimm-button>
        <grimm-button @click="showConfirmDialog">确认弹框</grimm-button>
        <grimm-button @click="triggerGrimmDialog">组件调用</grimm-button>
      </grimm-button-group>
      <grimm-dialog
        :visible="visible"
        title="标题"
        message="恭喜发财 恭喜发财 恭喜发财 恭喜发财"
        @confirm="triggerGrimmDialog"
      >
        <img src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="" style="width: 100%;">
      </grimm-dialog>
    </template>
  </grimm-page>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';
import GrimmButtonGroup from '../../components/GrimmButtonGroup.vue';
export default {
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    showTipsDialog() {
      this.dialog = this.$createDialog({
        title: '标题',
        width: '240',
        message: '恭喜发财\n 恭喜发财 恭喜发财 恭喜发财',
        onConfirm: () => {
          console.log('confirm')
        }
      });
      this.dialog.show();
    },
    showConfirmDialog() {
      this.dialog = this.$createDialog({
        title: '标题',
        width: '300',
        message: '确认弹框内容',
        showCancelButton: true,
        onCancel: () => {
          console.log('cancel')
        },
        onConfirm: () => {
          console.log('confirm')
        }
      });
      this.dialog.show();
    },
    triggerGrimmDialog() {
      this.visible = !this.visible;
    },
  },
  components: {
    GrimmPage,
    GrimmButtonGroup,
  },
}
</script>

<style lang="stylus">

</style>